<template>
  <div class="common-body-page report-detail-page">
    <header class="main-header">
        <div>
          <!-- 标题 -->
          <div class="title">
            <router-link to='/' tag="p">{{$I18n.dashBoard}}<span>/</span></router-link>
            <router-link to='/applyList' tag="p">{{$I18n.apply}}<span>/</span></router-link>
            <p class="black">{{$I18n.applyInfo}}</p>
          </div>
          <!-- 按钮 -->
          <div>
            <button class="btn" @click="saveApply" v-if="!isEdit">{{$I18n.save}}</button>
            <button class="btn" @click="isEdit=false" v-else>{{$I18n.edit}}</button>
            <button class="cancel-btn" @click="cancelDialog=true">{{$I18n.cancel}}</button>
          </div>
        </div>
    </header>
    <section class="gc-body">
      <h3 class="title">{{$I18n.applyInfo}}</h3>
        <div class="body">
          <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.baseInfo}}</div>
        <el-form>
          <!-- 下单号 -->
          <el-form-item  :label="$I18n.applyId" :class="{'no-line': true}">
            <el-input v-model="applyData.applyId" :readonly="true"></el-input>
          </el-form-item>
          <!-- 站点 -->
          <el-form-item :label="$I18n.site" required :class="{'no-line': isEdit}">
            <el-select v-model="applyData.site" :readonly="isEdit">
              <el-option v-for="item in siteList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
           <!-- 来源 -->
          <el-form-item :label="$I18n.applySource" required :class="{'no-line': isEdit}">
            <el-select v-model="applyData.applySource" :readonly="isEdit">
              <el-option v-for="item in sourceList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
          <!-- 下单日期 -->
          <el-form-item  :label="$I18n.applyDate" required :class="{'no-line': isEdit}">
            <el-date-picker class="el-gclife-date"  format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="applyData.applyDate"   type="date" placeholder="请选择下单日期">
          </el-date-picker>
          </el-form-item>
          <!-- 期望留评日期 -->
          <el-form-item  :label="$I18n.expectCommentDate" required :class="{'no-line': isEdit}">
            <el-date-picker class="el-gclife-date" :readonly="isEdit" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="applyData.expectCommentDate"   type="date" placeholder="请选择期望留评日期"></el-date-picker>
          </el-form-item>
          <!-- 客户 -->
          <el-form-item  :label="$I18n.productBelongUser" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.productBelongUser" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 处理人 -->
          <el-form-item  :label="$I18n.optionUserName" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.optionUserName" :readonly="isEdit"></el-input>
          </el-form-item>
            <!-- 业务类型 -->
          <el-form-item :label="$I18n.businessType" required :class="{'no-line': isEdit}">
            <el-select v-model="applyData.businessType" :readonly="isEdit">
              <el-option v-for="item in businessTypeList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
            <!-- 状态 -->
          <el-form-item :label="$I18n.applyStatus" required :class="{'no-line': isEdit}">
            <el-select v-model="applyData.applyStatus" :readonly="isEdit">
              <el-option v-for="item in statusList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
            <!-- 物流 -->
          <el-form-item :label="$I18n.expressMethod" required :class="{'no-line': isEdit}">
            <el-select v-model="applyData.expressMethod" :readonly="isEdit">
              <el-option v-for="item in expressList" :key="item.codeKey" :label="item.codeName" :value="item.codeKey"></el-option>
            </el-select>
          </el-form-item>
            <!-- 备注 -->
          <el-form-item  :label="$I18n.remark" :class="{'no-line': isEdit}">
            <el-input v-model="applyData.remark" :readonly="isEdit"></el-input>
          </el-form-item>   
              
        </el-form>
        <!-- 出险人信息 -->
        <div class="self-tab">{{$I18n.productInfo}}</div>
        <el-form>
          <!-- 店铺 -->
          <el-form-item  :label="$I18n.shopName" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.shopName" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- 产品 -->
          <el-form-item  :label="$I18n.productName" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.productName" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- Assin -->
          <el-form-item  :label="$I18n.assin" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.assin" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 价格 -->
          <el-form-item  :label="$I18n.price" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.price" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 数量 -->
          <el-form-item :label="$I18n.mult" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.mult" :readonly="isEdit"></el-input>
          </el-form-item>
          <!-- 关键词 -->
          <el-form-item  :label="$I18n.searchKeyword" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.searchKeyword" :readonly="isEdit"></el-input>
          </el-form-item>
            <!-- 位置 -->
          <el-form-item  :label="$I18n.position" required :class="{'no-line': isEdit}">
            <el-input v-model="applyData.position" :readonly="isEdit"></el-input>
          </el-form-item>
           <!-- 产品网址 -->
          <el-form-item  :label="$I18n.productUrl" required  class="row" :class="{'no-line': isEdit}">
            <el-input type="textarea" v-model="applyData.productUrl" :readonly="isEdit"></el-input>
          </el-form-item>       
        </el-form>
      </div>
    </section>
    <!-- 取消弹框 -->
    <el-dialog :title="$I18n.hint" :visible.sync="cancelDialog" custom-class="hit-dialog">
      <p class="text">{{$I18n.confirmBack}}</p>
      <div slot="footer" class="dialog-footer">
        <button class="btn" @click="$router.push('/applyList')" >{{$I18n.ok}}</button>
        <button class="cancel-btn" @click="cancelDialog=false">{{$I18n.cancel}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import INTERFACE from './interface'

export default {
  data() {
    return {
      applyId: this.$route.query.applyId,
      cancelDialog: false,
      applyData: {},
      isEdit: false,
      siteList: [
        {codeKey: 'US', codeName: '美国'},
        {codeKey: 'JP', codeName: '日本'},
        {codeKey: 'FR', codeName: '法国'},
        {codeKey: 'CA', codeName: '加拿大'},
        {codeKey: 'UK', codeName: '英国'},
        {codeKey: 'IT', codeName: '意大利'},
        {codeKey: 'DE', codeName: '德国'},
        {codeKey: 'AU', codeName: '澳大利亚'},
        {codeKey: 'ES', codeName: '西班牙'},
        {codeKey: 'KR', codeName: '韩国'},
      ],
      statusList: [
        {codeKey: 'WAIT', codeName: '待处理'},
        {codeKey: 'IN_PROGRESS', codeName: '进行中'},
        {codeKey: 'COMPLETE', codeName: '已完成'}
      ],
      sourceList: [
        {codeKey: 'INSIDE', codeName: '内部下单'},
        {codeKey: 'OUTSIDE', codeName: '外部下单'}
      ],
      expressList: [
        {codeKey: 'FBA', codeName: 'FBA'},
        {codeKey: 'FBM', codeName: 'FBM'}
      ],
      businessTypeList: [
        {codeKey: 'REVIEWS', codeName: '留评'},
        {codeKey: 'FEEDBACK', codeName: 'FeedBack'},
        {codeKey: 'NO_REVIEWS', codeName: '免评'},
        {codeKey: 'QA', codeName: 'QA'},
        {codeKey: 'ADD_SHOPPING_TROLLEY', codeName: '加购'},
      ],
    }
  },
  created() {
    if (!this.applyId) return
    this.isEdit = true
    INTERFACE.queryApplyDetail({applyId: this.applyId}).then(res => {
      this.applyData = res.data
    })
  },
  methods: {
    saveApply() {
      this.applyData.applyId = this.applyId;
      INTERFACE.saveApply(this.applyData).then(res => {
        if (res.error !== 'SUCCESS') return
        window.Tips(res.message)
        this.$router.push('/applyList')
      })
    }
  }
}
</script>